Align Element Right and Left

Note: use these classes to align the items on the page to the left or the right. These classes can be seen active here, right-left-align

align an element right

Note: for non-text elements only, such as img , or div tags

<div class="align-right-margin"></div>
<img class="align-right-margin">

align an element left

Note: for non-text elements only, such as img , or div tags

<div class="align-left-margin"></div>
<img class="align-left-margin">

align text right

Note: for text elements only, such as <h> , <ul> , <li> and <p> tags

<p class="text-right">text goes here</p>

align text left

Note: for text elements only, such as <h> , <ul> , <li> and <p> tags

<p class="text-left">text goes here</p>

Example use cases

Note: below are examples of how to use these classes on each element individually.

    <div class="two-column">
        <div class="column">
            <h2 class="text-right">Right Class</h2>
            <p class="text-right">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat tempora veritatis nostrum hic repudiandae cum ut labore accusantium quia ducimus aliquam magni animi sed quis voluptatem atque, necessitatibus est nisi!
                Corrupti facilis neque autem dolore reiciendis velit, est nemo consequuntur cumque adipisci quos quisquam excepturi eum! Maxime laborum voluptatibus ab enim provident, animi libero commodi maiores saepe, eveniet corporis! Itaque.</p>
            <img class="align-right" src="wysiwyg/arrow.png" alt="" />
        </div>
        <div class="column">
            <h2 class="text-left">Left Class</h2>
            <p class="text-left">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat tempora veritatis nostrum hic repudiandae cum ut labore accusantium quia ducimus aliquam magni animi sed quis voluptatem atque, necessitatibus est nisi!
                Corrupti facilis neque autem dolore reiciendis velit, est nemo consequuntur cumque adipisci quos quisquam excepturi eum! Maxime laborum voluptatibus ab enim provident, animi libero commodi maiores saepe, eveniet corporis! Itaque.</p>
            <img class="align-left" src="wysiwyg/arrow.png" alt="" />
        </div>
    </div>
    <div class="two-column">
        <div class="column">
            <h2 class="text-left">Left Class</h2>
            <p class="text-left">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat tempora veritatis nostrum hic repudiandae cum ut labore accusantium quia ducimus aliquam magni animi sed quis voluptatem atque, necessitatibus est nisi!
                Corrupti facilis neque autem dolore reiciendis velit, est nemo consequuntur cumque adipisci quos quisquam excepturi eum! Maxime laborum voluptatibus ab enim provident, animi libero commodi maiores saepe, eveniet corporis! Itaque.</p>
            <img class="align-left" src="wysiwyg/arrow.png" alt="" />
        </div>
        <div class="column">
            <h2 class="text-right">Right Class</h2>
            <p class="text-right">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat tempora veritatis nostrum hic repudiandae cum ut labore accusantium quia ducimus aliquam magni animi sed quis voluptatem atque, necessitatibus est nisi!
                Corrupti facilis neque autem dolore reiciendis velit, est nemo consequuntur cumque adipisci quos quisquam excepturi eum! Maxime laborum voluptatibus ab enim provident, animi libero commodi maiores saepe, eveniet corporis! Itaque.</p>
            <img class="align-right" src="wysiwyg/arrow.png" alt="" />
        </div>
    </div>

Note: below are examples on how to use these classes on the containing div. You can use both text-left and text-right classes as well as both align-left and align-right classes on the containing div as needed. Pay attention to whehter it's text or an element you are trying to align. They each have different classes. text-* will align the text of h tags, p tags, and a tags. If there is loose text in a div, it will align that as well. align-* will align img tags, all non-text content and a tags.

  <div class="two-column">
      <div class="column align-right text-right">
          <h2>Right Class</h2>
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat tempora veritatis nostrum hic repudiandae cum ut labore accusantium quia ducimus aliquam magni animi sed quis voluptatem atque, necessitatibus est nisi!
              Corrupti facilis neque autem dolore reiciendis velit, est nemo consequuntur cumque adipisci quos quisquam excepturi eum! Maxime laborum voluptatibus ab enim provident, animi libero commodi maiores saepe, eveniet corporis! Itaque.</p>
          <img src="wysiwyg/arrow.png" alt="" />
      </div>
      <div class="column align-left text-left">
          <h2>Left Class</h2>
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat tempora veritatis nostrum hic repudiandae cum ut labore accusantium quia ducimus aliquam magni animi sed quis voluptatem atque, necessitatibus est nisi!
              Corrupti facilis neque autem dolore reiciendis velit, est nemo consequuntur cumque adipisci quos quisquam excepturi eum! Maxime laborum voluptatibus ab enim provident, animi libero commodi maiores saepe, eveniet corporis! Itaque.</p>
          <img src="wysiwyg/arrow.png" alt="" />
      </div>
  </div>
  <div class="two-column">
      <div class="column text-left align-left">
          <h2>Left Class</h2>
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat tempora veritatis nostrum hic repudiandae cum ut labore accusantium quia ducimus aliquam magni animi sed quis voluptatem atque, necessitatibus est nisi!
              Corrupti facilis neque autem dolore reiciendis velit, est nemo consequuntur cumque adipisci quos quisquam excepturi eum! Maxime laborum voluptatibus ab enim provident, animi libero commodi maiores saepe, eveniet corporis! Itaque.</p>
          <img src="wysiwyg/arrow.png" alt="" />
      </div>
      <div class="column text-right align-right">
          <h2>Right Class</h2>
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat tempora veritatis nostrum hic repudiandae cum ut labore accusantium quia ducimus aliquam magni animi sed quis voluptatem atque, necessitatibus est nisi!
              Corrupti facilis neque autem dolore reiciendis velit, est nemo consequuntur cumque adipisci quos quisquam excepturi eum! Maxime laborum voluptatibus ab enim provident, animi libero commodi maiores saepe, eveniet corporis! Itaque.</p>
          <img src="wysiwyg/arrow.png" alt="" />
      </div>
  </div>